<template>
  <div class="label-result">
    <div class="history-task-container">
      <div class="search-container" v-role="'A030101002'">
        <div class="search-input">
          <el-input
            v-model="model.keyword"
            placeholder="输入任务ID/名称/创建人"
            :prefix-icon="Search"
            style="width: 272px; margin-right: 24px"
            clearable
            @keydown.enter="search"
          />
          <el-select
            v-model="model.status"
            placeholder="任务状态"
            style="width: 272px"
            clearable
          >
            <el-option
              v-for="item in taskStatusList"
              :key="item.value"
              :label="item.name"
              :value="item.value"
            />
          </el-select>
          <a-date-picker
            v-model="model.beginDate"
            placeholder="起始时间"
            style="margin-left: 25px; width: 272px"
            value-format="YYYY-MM-DD"
            :disabled-date="(d:any) => dayjs(d).isAfter(dayjs(model.endDate))"
          />
          <a-date-picker
            v-model="model.endDate"
            placeholder="结束时间"
            style="margin-left: 25px; width: 272px"
            value-format="YYYY-MM-DD"
            :disabled-date="(d:any) => dayjs(d).isBefore(dayjs(model.beginDate))"
          />
        </div>
        <div class="button-conatiner">
          <el-button @click="reset">重置</el-button>
          <el-button @click="search" type="primary">查询</el-button>
        </div>
      </div>
      <div class="content">
        <div class="title-info">
          <div class="title">标注结果列表</div>
          <el-button @click="batchExport" v-role="'A030101004'">批量导出</el-button>
        </div>
        <!-- <a-table
            :columns="columns"
            :data="labelResultList"
          >

          </a-table> -->
        <el-table
          v-role="'A030101001'"
          :data="labelResultList"
          style="width: 100%; height: calc(100% - 108px)"
          stripe
          class="define-el-table"
          @selection-change="handleSelectionChange"
        >
          <el-table-column type="selection" width="54" />
          <el-table-column label="任务ID">
            <template #default="scope">
              <span>{{ scope.row.id }}</span>
            </template>
          </el-table-column>

          <el-table-column label="任务名称">
            <template #default="scope">
              <span>{{ scope.row.name }}</span>
            </template>
          </el-table-column>

          <el-table-column label="已提交序列数量">
            <template #default="scope">
              <span>{{ scope.row.submitedSeriesCount }}</span>
            </template>
          </el-table-column>

          <el-table-column label="任务状态">
            <template #default="scope">
              <span>{{
                (taskStatusList.find((item) => item.value == scope.row.status) || {}).name
              }}</span>
            </template>
          </el-table-column>

          <el-table-column label="操作" width="320">
            <template #default="scope">
              <el-button
                v-role="'A030101003'"
                @click="exportClick(scope.row, scope.$index)"
                type="text"
                >导出</el-button
              >
            </template>
          </el-table-column>
        </el-table>
        <div
          class="el-pagination-container"
          style="display: flex; justify-content: flex-end"
          v-role="'A030101001'"
        >
          <el-pagination
            v-model:current-page="currentPage"
            v-model:page-size="pageSize"
            :page-sizes="[10, 20, 50, 100, 500]"
            layout="prev, pager, next, sizes"
            :total="total"
            background
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
          />
        </div>
      </div>
    </div>

    <!-- 新建标注类型 -->
    <el-dialog
      v-model="createVisible"
      title="新建标注类型"
      width="780px"
      class="define-el-dialog"
    >
      <div class="content">
        <el-form :model="creatModel" label-width="68px">
          <el-form-item label="选择种类">
            <el-radio-group v-model="creatModel.选择种类">
              <el-radio :label="1">单个病灶</el-radio>
              <el-radio :label="2">病灶群组</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-row>
            <el-col :span="12">
              <el-form-item label="名称">
                <el-input v-model="creatModel.名称" placeholder="请输入" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="编码">
                <el-input v-model="creatModel.编码" disabled />
              </el-form-item>
            </el-col>
          </el-row>
          <div class="lesions-group-container" v-if="creatModel.选择种类 === 2">
            <el-row v-for="(item, index) in lesionsGroupList" :key="index">
              <el-col :span="10">
                <el-form-item :label="'病灶' + (index + 1)">
                  <el-input v-model="item.name" placeholder="请输入" />
                </el-form-item>
              </el-col>
              <el-col :span="10">
                <el-form-item label="编码">
                  <el-input v-model="item.编码" disabled />
                </el-form-item>
              </el-col>
              <el-col :span="4">
                <div class="icon-handle">
                  <div class="plus" @click="plus(index)">
                    <el-icon><Plus /></el-icon>
                  </div>
                  <div class="delete" v-show="index > 0" @click="del(index)">
                    <el-icon><Delete /></el-icon>
                  </div>
                </div>
              </el-col>
            </el-row>
          </div>
        </el-form>
      </div>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="colseVisible">取消</el-button>
          <el-button type="primary" @click="colseVisible">确认</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script lang="ts" setup>
import { onMounted, reactive, ref } from "vue";
// import SysNotice from '@/components/sys-notice/index.vue';
import { Message } from "@arco-design/web-vue";
import { Delete, Plus, Search } from "@element-plus/icons-vue";
import dayjs from "dayjs";
import { annoResultExport, annoTaskSearch } from "@/api/dataExport/dataExport";

onMounted(() => {
  setLabelResultList();
});

/**
 * 所有任务 搜索
 */
const taskStatusList = reactive([
  { name: "未发布", value: 0 },
  { name: "进行中", value: 1 },
  { name: "已完成", value: 2 },
  { name: "已终结", value: 3 },
]);
const labelResultList = ref([]);
const currentPage = ref(1);
const pageSize = ref(10);
const total = ref(0);
const model = reactive({
  keyword: "",
  status: "",
  beginDate: "",
  endDate: "",
  page: currentPage.value,
  pageSize: pageSize.value,
});
const multipleSelection = ref<number[]>([]);
const columns = ref([
  { title: "任务ID", dataIndex: "id", slotName: "id" },
  { title: "任务名称", dataIndex: "name", slotName: "name" },
  {
    title: "已提交序列数量",
    dataIndex: "submitedSeriesCount",
    slotName: "submitedSeriesCount",
  },
  { title: "任务状态", dataIndex: "status", slotName: "status" },
]);

const setLabelResultList = async () => {
  const _model = {
    ...model,
    page: currentPage.value,
    pageSize: pageSize.value,
  };
  const res = await annoTaskSearch(_model);
  labelResultList.value = res?.data?.list || [];
  total.value = res?.data?.total || 0;
};
// 查询重置
const reset = () => {
  model.keyword = "";
  model.status = "";
  model.beginDate = "";
  model.endDate = "";
  currentPage.value = 1;
  pageSize.value = 10;
  setLabelResultList();
};
const search = () => {
  currentPage.value = 1;
  setLabelResultList();
};
/**
 * 分页
 */
const handleSizeChange = (size: number) => {
  pageSize.value = size;
  setLabelResultList();
};
const handleCurrentChange = (page: number) => {
  currentPage.value = page;
  setLabelResultList();
};

const exportClick = async (item: { id: number }, index: number) => {
  await annoResultExport({
    taskIds: [item.id],
  });
};

const batchExport = async () => {
  if (multipleSelection.value.length === 0) {
    Message.warning("请先选择表格数据，再进行导出！");
    return;
  }
  await annoResultExport({
    taskIds: multipleSelection.value,
  });
};

/**
  新建标注类型
*/
const createVisible = ref(false);
const create = () => {
  createVisible.value = true;
};
const colseVisible = () => {
  createVisible.value = false;
};
const creatModel = ref({
  选择种类: 1,
  名称: "",
  编码: "",
});
const lesionsGroupList = ref([{ name: "", 编码: "" }]);
const plus = (index: number) => {
  lesionsGroupList.value.push({ name: "", 编码: "" });
};
const del = (index: number) => {
  lesionsGroupList.value.splice(index, 1);
};
// 表格多选
const handleSelectionChange = (val: any[]) => {
  multipleSelection.value = val.map((item: { id: number }) => item.id);
};
</script>

<style lang="less">
.label-result {
  background-color: #f5f5f5;
  padding: 20px;
  // height: 100%;
  height: calc(100vh - 56px);
  .history-task-container {
    height: 100%;
    .text-info {
      font-size: 16px;
      color: #333;
      font-style: normal;
      font-weight: 700;
      margin-bottom: 20px;
    }
    .search-container {
      display: flex;
      justify-content: space-between;
      margin-bottom: 20px;
      background-color: #fff;
      padding: 20px;
      .buttons-container {
        background-color: #fff;
      }
    }
    .content {
      padding: 20px 57px 20px 20px;
      background-color: #fff;
      height: calc(100% - 90px);
      .title-info {
        display: flex;
        justify-content: space-between;
        .title {
          font-style: normal;
          font-weight: 700;
          font-size: 16px;
          color: #333333;
          margin-bottom: 20px;
        }
      }

      .el-table {
        margin-top: 10px;
      }
      .el-table thead tr th,
      .el-table tbody tr td {
        text-align: left;
      }
      .el-table thead tr th {
        background-color: #fff;
      }
      .el-table__body tr {
        cursor: pointer;
      }
    }
  }
}

.define-el-dialog {
  .content {
    padding: 28px 57px 28px 28px;
    .lesions-group-container {
      padding: 0 0 0 24px;
      .icon-handle {
        display: flex;
        justify-content: flex-end;
        align-items: center;
        & > div {
          width: 32px;
          height: 32px;
          display: flex;
          justify-content: center;
          align-items: center;
          cursor: pointer;
        }
        .el-icon {
          color: #448e97;
          font-size: 16px;
        }
      }
    }
  }
}
</style>
